import React, {useEffect} from 'react';
import {Button, Form, Input, Radio} from 'antd';
import {WorkStationProps} from '@/interface/workstation';
import {useStores} from '@/store';
import useDrag from '../useDrag';
import {observer} from 'mobx-react-lite';

const OfficeForm = () => {
    const {graphStore} = useStores();
    const {number, username, status} = graphStore.workStationProps;

    const [form] = Form.useForm();
    const handleValueChange = (changedValues: keyof WorkStationProps) => {
        graphStore.setWorkStationProps(changedValues);
    };

    const handleSubmit = () => {
        useDrag.replaceNodeData();
    };

    const handleCancel = () => {
        form.resetFields();
    };

    useEffect(() => {
        form.setFieldValue('number', number);
    }, [number]);

    useEffect(() => {
        form.setFieldValue('username', username);
    }, [username]);

    useEffect(() => {
        form.setFieldValue('status', status);
    }, [status]);

    return (
        <div className='edit-container'>
            <Form
                form={form}
                layout='vertical'
                onValuesChange={handleValueChange}
                initialValues={graphStore.workStationProps}
            >
                <Form.Item label='工位号码' name='number' required>
                    <Input type='number' placeholder='请输入工位号码' />
                </Form.Item>
                <Form.Item label='请输入用户' name='username' required>
                    <Input placeholder='请输入用户名称' />
                </Form.Item>
                <Form.Item name='status' label='请选择状态'>
                    <Radio.Group>
                        <Radio value={1}>未占用</Radio>
                        <Radio value={2}>已占用</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item>
                    <Button className='mr10' type='default' onClick={handleCancel}>
                        取消
                    </Button>
                    <Button type='primary' onClick={handleSubmit}>
                        确认
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
};

export default observer(OfficeForm);
